<template>
  <el-container>
    <div style="padding: 10px;padding-bottom: 0">
      <div class="report_header" ref="headerHeight">
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="report_header_left"></div>
          <div style="display: flex;align-items: center;">
            <div class="report_header_date">
              <el-date-picker v-model="query.date" value-format="yyyy-MM-dd" type="daterange" align="right"
                              unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </div>
            <div class="report_header_query" style="">
              <queryShop @queryShopClick='queryShopClick'></queryShop>
            </div>

            <div class="report_header_query">
              <el-select v-model="memberName" value-key="id" clearable placeholder="客户" filterable
                         @focus="getMemberList" @change="selectMember" :filter-method="queryMember">
                <el-option v-for="item in memberIdOptions" style="width: 600px;" :key="item.id" :label="item.name"
                           :value="item">
                  <div style="display: flex">
                    <span style="width: 60px;">{{ item.code }}</span>
                    <span style="float: left;width: 100px;overflow: hidden;text-overflow: ellipsis;">{{
                      item.name
                      }}</span>
                    <span style="float: right; color: #8492a6; font-size: 8px;width: 80px;margin-left: 10px">{{
                      item.mobile
                      }}</span>
                    <div style="width: 200px;">
                      <span style="color: #8492a6; font-size: 8px;">{{ item.address }}</span>
                    </div>
                  </div>
                </el-option>
                <div style="display: flex;width: 100%;position: absolute;bottom: 0">
                  <div style="width: 50%;background-color: rgb(248,248,248);"></div>
                  <div class="elOption" @click="toSearchMember">搜索客户</div>
                </div>
                <div style="height: 30px"></div>
              </el-select>
            </div>

            <div class="report_header_query" style="width: 120px;">
              <el-select v-model="query.emoloyeeId" clearable placeholder="送货员" @change="deliveryaa" filterable
                         @focus="getEmployeeList('')" :filter-method="queryEmployee" style="width: 100%">
                <el-option v-for="item in emoloyee" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </div>

            <div class="report_header_query">
              <el-select v-model="productName" clearable placeholder="商品" filterable @focus="getProductList"
                         value-key="id" @change="changeProduct" :filter-method="queryProduct">
                <el-option v-for="item in productOptions" :key="item.id" style="width:650px" :label="item.name"
                           :value="item">
                  <div style="display: flex">
                    <span style="width: 80px;overflow: hidden;text-overflow: ellipsis;">{{ item.sn }}</span>
                    <span style="float: left;width: 160px;overflow: hidden;text-overflow: ellipsis;margin-left: 10px">{{
                      item.name
                      }}</span>
                    <div style="width: 200px;">
                      <span style="color: #8492a6; font-size: 8px;">{{ item.spec1 }}</span>
                    </div>
                  </div>
                </el-option>
                <div style="display: flex;width: 100%;position: absolute;bottom: 0">
                  <div style="width: 50%;background-color: rgb(248,248,248);"></div>
                  <div class="elOption" @click="toAddProduct">搜索商品</div>
                </div>
                <div style="height: 40px"></div>
              </el-select>
            </div>
          </div>
          <div style="display: flex;flex-direction: row;justify-content: flex-end;">
            <div
              style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px;justify-content: flex-end;">
              <div class="report_header_query">
                <el-input placeholder="客户编号/订单号/收货地址" v-model="query.information" clearable></el-input>
              </div>
            </div>
            <el-button style="margin-left: 10px;margin-top: 7px;height: 100%" size="small" type="primary"
                       @click="queryClick">查询
            </el-button>
            <el-button style="margin-left: 10px;margin-top: 7px;height: 100%" size="small" type="primary"
                       @click="addClick" v-permission="['order.add']">新增
            </el-button>

            <el-dropdown trigger="click" @command="handleCommand">
              <el-button style="margin-left: 10px;margin-top: 7px;" size="small" type="warn">
                批量操作<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-permission="['order.audit']" command="amapClick">地图接单</el-dropdown-item>
                <el-dropdown-item v-permission="['order.audit']" command="batchConfirmClick">批量核销</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div style="width: 800px;display: flex;align-items: center;" v-show="queryType == true">
          <!--          这是放隐藏条件的容器-->
        </div>
      </div>
    </div>
    <div class="pd10" style="position:relative">
      <!--<el-checkbox v-model="checkBoxRefresh" class="el-checkbox-refresh" label="是否开启实时刷新" name="type"-->
                   <!--size="medium"></el-checkbox>-->
      <el-tabs type="border-card" v-model="activeName" @tab-click="tabsClick">
        <el-tab-pane label="全部订单" name="全部订单">
          <div class="details_card" v-loadMore="[payLoads,'shipping-list3']" :style="{height:tabsHeight+'px'}">
            <orderList :orderForm="orderForm" @detailsClick="detailsClick"></orderList>
          </div>
        </el-tab-pane>
        <el-tab-pane name="待接单">
                    <span slot="label">
                        <span class="span-box">
                            <span>待接单</span>
                            <span class="btn-bell-badge" v-if="ordercounnum > 0">
                                <span class="num">{{ordercounnum}}</span>
                            </span>
                        </span>
                    </span>
          <div class="details_card" v-loadMore="[payLoads,'order-list6']" :style="{height:tabsHeight+'px'}">
            <orderList :orderForm="orderForm" @detailsClick="detailsClick"></orderList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待付款" name='待付款'>
          <div class="details_card" v-loadMore="[payLoads,'order-list5']" :style="{height:tabsHeight+'px'}">
            <orderList :orderForm="orderForm" @detailsClick="detailsClick"></orderList>
          </div>
        </el-tab-pane>
        <el-tab-pane name="待派单">
                    <span slot="label">
                        <span class="span-box">
                            <span>待派单</span>
                            <span class="btn-bell-badge" v-if="Tobeshipped > 0">
                                <span class="num">{{Tobeshipped}}</span>
                            </span>
                        </span>
                    </span>
          <div class="details_card" v-loadMore="[payLoads,'order-list1']" :style="{height:tabsHeight+'px'}">
            <shippingList shippingType="待配送" :shippingForm="shippingForm" ordertype="shipping"
                          @detailsClick="detailsClickone"></shippingList>
          </div>
        </el-tab-pane>
        <el-tab-pane name="配送中">
                    <span slot="label">
                        <span class="span-box">
                            <span>配送中</span>
                            <span class="btn-bell-badge" v-if="Tobedelivered > 0">
                                <span class="num">{{Tobedelivered}}</span>
                            </span>
                        </span>
                    </span>
          <div class="details_card" v-loadMore="[payLoads,'order-list2']" :style="{height:tabsHeight+'px'}">
            <shippingList shippingType="配送中" :shippingForm="shippingForm" ordertype="shipping"
                          @detailsClick="detailsClickone" abnormalshow='true'></shippingList>
          </div>
        </el-tab-pane>
        <el-tab-pane name="待核销">
                    <span slot="label">
                        <span class="span-box">
                            <span>待核销</span>
                            <span class="btn-bell-badge" v-if="Tobeshippedhexiao > 0">
                                <span class="num">{{Tobeshippedhexiao}}</span>
                            </span>
                        </span>
                    </span>
          <!--          订单页面-->
          <div class="details_card" v-loadMore="[payLoads,'shipping-list3']" :style="{height:tabsHeight+'px'}">
            <shippingList shippingType="已配送" :shippingForm="shippingForm" ordertype="shipping"
                          @detailsClick="detailsClickone" abnormalshow='true'></shippingList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="已完成">
          <div class="details_card" v-loadMore="[payLoads,'order-list4']" :style="{height:tabsHeight+'px'}">
            <orderList :orderForm="orderForm" @detailsClick="detailsClick"></orderList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已关闭" name="已关闭">
          <div class="details_card" v-loadMore="[payLoads,'order-list5']" :style="{height:tabsHeight+'px'}">
            <orderList :orderForm="orderForm" @detailsClick="detailsClick"></orderList>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="新增商品" :visible.sync="orderVisible" width="950px" v-el-drag-dialog :before-close="orderClose">
      <div style="position: relative;">
        <productTable ref="productList" @doubleClick="doubleClick" @addClick="addProductClick"></productTable>
      </div>
    </el-dialog>
    <el-dialog title="双击选择客户" :visible.sync="memberTableVisible" width="950px" v-el-drag-dialog append-to-body
               :before-close="memberTableClose">
      <div style="position: relative;">
        <member-table :key="times" @memberDouble="memberDouble" @memberTableClose="memberTableClose"></member-table>
      </div>
    </el-dialog>
    <el-dialog title="批量核销" :visible.sync="batchConfirmVisible" width="850px" min-height="400px" v-el-drag-dialog append-to-body
               :before-close="batchConfirmClose">
      <div style="display: flex;align-items: center;margin-left: 10px;">
      <div class="report_header_date" style="width: 180px;">

          <el-date-picker style="width:100%" v-model="deliveryDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="送达日期">
          </el-date-picker>

      </div>
      <div class="report_header_query" style="width: 120px;">
        <el-select v-model="shippingEmployeeId" clearable placeholder="送货员" @change="shippingEmployeeIdChange" filterable
                   @focus="getEmployeeList('')" :filter-method="queryEmployee" style="width: 100%">
          <el-option v-for="item in emoloyee" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </div>

        <el-button style="margin-left: 10px;margin-top: 7px;height: 100%" size="small" type="primary"
                   @click="batchConfirmQuery">查询
        </el-button>
      </div>

      <div style="position: relative;margin-top: 20px;">
        <!--          核销总计          -->
        <div style="padding-left:20px;padding-right:20px;padding-bottom:15px">
          <div>
            <div class="app">
              <div class="content">
                <!--<div class="content_one">-->
                  <!--<span>收款金额：{{ deliveryForm==null?'0.0':delivery(deliveryForm.paymentAmt)}}</span>-->
                  <!--<span>退款金额：{{ deliveryForm==null?'0.0':delivery(deliveryForm.refundsAmt)}}</span>-->
                <!--</div>-->
                <div class="content_one">
                  <span>压桶数:{{deliveryForm==null?'0.0':deliveryForm.plegeQry}}</span>
                  <span>退桶数:{{deliveryForm==null?'0.0':deliveryForm.returnQry}}</span>
                </div>
                <div class="content_one">
                  <span>压桶金额:{{deliveryForm==null?'0.0':delivery(deliveryForm.plegeAmt)}}</span>
                  <span>退桶金额:{{deliveryForm==null?'0.0':delivery(deliveryForm.returnAmt)}}</span>
                </div>
                <div class="content_one">
                  <span>客户欠桶:{{deliveryForm==null?'0.0':deliveryForm.oweQry}}</span>
                  <span>客户存桶:{{deliveryForm==null?'0.0':deliveryForm.storeQry}}</span>
                </div>
                <div class="content_one">
                  <span>送货数量:{{deliveryForm==null?'0.0':deliveryForm.outQry ? deliveryForm.outQry : 0}}</span>
                  <span>回桶数量:{{deliveryForm==null?'0.0':deliveryForm.bckQry}}</span>
                </div>
              </div>

            </div>
            <div class="summary">
              <div style="display:flex;">
                <div style="margin-right:10px">
                  <span>实收金额:</span>
                  <span style="color:red">{{deliveryForm==null?'0.0':delivery(deliveryForm.effectiveAmt)}}</span>
                </div>
                <div>
                  <span>实收水票:</span>
                  <span style="color:red">{{deliveryForm==null?'0.0':delivery(deliveryForm.paymentQry)}}</span>
                </div>
              </div>
            </div>
            <el-button type="warning" @click="writeoff" style="margin:30px"  v-if="deliveryForm!=null">一键核销</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-footer class="el-footerBox" style="margin-bottom: auto">
      <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="totalOrder"></pagination>
    </el-footer>
  </el-container>
</template>

<script>
  import queryShop from "@/components/Query/queryShop";
  import {mapGetters} from "vuex";
  import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
  import memberTable from "@/components/MemberTable/index";
  import productTable from "@/components/ProductList/productList";
  import {EventBus} from "@/api/eventBus";
  import orderList from "./components/list";
  import {list, count as ordercountclick} from "@/api/order";
  import Pagination from "@/components/Pagination";
  import utils from "../../utils/utils.js";
  import loadMore from "@/utils/more.js";
  import {list as memberList} from "@/api/member";
  import {list as productList} from "@/api/product";
  import permission from "@/directive/permission/index.js"; // 权限判断指令
  import {list as tuilist} from "@/api/askfor";
  import askforList from "../askfor/components/list";
  import shippingList from "../shipping/components/list";
  import {list as shipplist, count} from "@/api/shipping";
  import {deliveryshippingList, summary} from "@/api/shippingSettle";
  import deliverylist from "../shipping/components/deliverylist";
  import {list as emoloyeeList} from "@/api/sysEmployee";
  import {completeBatch} from "@/api/shippingSettle";
  export default {
    name: "order-list",
    directives: {loadMore, permission, elDragDialog},
    activated() {
      this.payLoads = new Date().getTime();
    },
    data() {
      return {
        checkBoxRefresh: false,
        timer: null,
        curTime: "",
        lastTime: null,
        realTimeRefresh: true,
        ordercounnum: 0,
        Tobedelivered: 0,
        Tobeshipped: 0,
        Tobeshippedhexiao: 0,
        activeName: "全部订单",
        tioajian: "",
        song: "",
        pagesnum: "全部订单",
        footernater: "",
        deliveryForm: null,
        selectsong: "",
        emoloyee: "",
        totalsong: false,
        shippingForm: [],
        obtain: "",
        payLoads: "",
        orderForm: [],
        times: "",
        pageNum: 1,
        batchConfirmVisible: false,
        memberTableVisible: false,
        orderVisible: false,
        memberName: "",
        productName: "",
        pageSize: 20,
        total: 0,
        curHeight: null,
        tabsHeight: null,
        queryType: true,
        mchType: "",
        mchIdOptions: [],
        memberIdOptions: [],
        productOptions: [],
        paymentStatus: "", // 付款状态
        shippingStatus: "", // 配送状态
        orderStatus: " ", // 订单状态
        query: {
          date: [],
          information: "",
          memberId: "",
          productId: "",
          shopId: "",
        },
        deliveryDate:null,
        shippingEmployeeId:"",
        keyword: {
          date: [],
          information: "",
          memberId: "",
          productId: "",
          shopId: "",
        },
        pickerOptions: {
          //时间快捷选择
          shortcuts: [
            {
              text: "昨天",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(
                  start.getTime() - 3600 * 1000 * 24 * 7
                );
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(
                  start.getTime() - 3600 * 1000 * 24 * 30
                );
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(
                  start.getTime() - 3600 * 1000 * 24 * 90
                );
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        },
      };
    },
    components: {
      queryShop,
      orderList,
      Pagination,
      memberTable,
      productTable,
      askforList,
      shippingList,
      deliverylist,
    },
    computed: {
      ...mapGetters(["mchId", "scopeType"]),
    },
    created() {
      var _this = this;
      this.loadOrder();
      this.refreshHit();
      EventBus.$on("order-add", (res) => {
        // 监听新增完毕
        // 更新列表数组
        _this.orderForm.splice(0, 0, res);
        setTimeout(() => {
          this.lastTime = null;
          this.refreshHit();
        }, 1000);
      });
      EventBus.$on("order-refresh", (res) => {
        // 监听新增完毕
        // 更新列表数组
        setTimeout(() => {
          this.lastTime = null;
          this.refreshHit();
        }, 1000);
      });
      EventBus.$on("order-edit", (res) => {
        // 监听状态更新
        // 更新列表数组
        for (var i = 0; i < _this.orderForm.length; i++) {
          if (_this.orderForm[i].id == res.id) {
            _this.$set(this.orderForm, i, res);
          }
        }
        setTimeout(() => {
          this.lastTime = null;
          this.refreshHit();
        }, 1000);
      });
      EventBus.$on("order-delete", (res) => {
        this.loadOrder();
      });
      EventBus.$on("order-view", (res) => {
        // 监听订单删除
        // 更新列表数组
        for (var i = 0; i < _this.orderForm.length; i++) {
          if (_this.orderForm[i].id == res.id) {
            _this.$set(this.orderForm, i, res);
          }
        }

        setTimeout(() => {
          this.lastTime = null;
          this.refreshHit();
        }, 1000);
      });
    },
    mounted() {
      this.comeIn();
      this.beforeMount();
      window.addEventListener("scroll", this.handleScroll, true);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    methods: {
      handleScroll() {
        let scrollTop =
          document.body.scrollTop || document.documentElement.scrollTop;
        this.lastTime = this.curTime;
      },
//      getInterval() {
//        this.timer = setInterval(() => {
//          if (this.checkBoxRefresh == true) {
//            console.log(this.checkBoxRefresh);
//            this.refreshPage();
//          }
//        }, 1000);
//      },
      refreshHit() {
        this.ordercount();
        this.countslect();
        this.counthexiao();
        this.countclick();
        this.totalOrder();
      },
      handleCommand(data) {
        console.log(data)
        var _this = this
        if (data == 'amapClick') {
          this.amapClick()
        } else if (data == 'batchConfirmClick') {
          this.batchConfirmClick()
        }
      },
      ordercount() {
        var _this = this;
        let params = new URLSearchParams();
        params.append("pageNum", _this.pageNum);
        params.append("pageSize", _this.pageSize);
        params.append("shippingStatus", 0);
        params.append("orderStatus", 1);
        params.append(
          "startDate",
          this.keyword.date == null || this.keyword.date.length == 0
            ? ""
            : this.keyword.date[0]
        );
        params.append(
          "endDate",
          this.keyword.date == null || this.keyword.date.length == 0
            ? ""
            : this.keyword.date[1]
        );
        params.append("paymentStatus", _this.paymentStatus);
        params.append("keyword", _this.keyword.information);
        params.append("memberId", _this.keyword.memberId);
        params.append("shopId", _this.keyword.shopId);
        params.append("productId", _this.keyword.productId);
        ordercountclick(params).then((res) => {
          this.ordercounnum = res.data;
        });
      },
      counthexiao() {
        var _this = this;
        if (utils.isNull(this.keyword.date)) {
          this.keyword.date = [];
        }
        let params = new URLSearchParams();
        params.append("pageNum", _this.pageNum);
        params.append("pageSize", _this.pageSize);
        params.append("shippingEmployeeId", _this.song);
        params.append("memberId", _this.keyword.memberId);
        params.append(
          "startDate",
          this.keyword.date.length > 0 ? this.keyword.date[0] : ""
        );
        params.append(
          "endDate",
          this.keyword.date.length > 0 ? this.keyword.date[1] : ""
        );
        params.append("keyword", _this.keyword.information);
        params.append("shopId", _this.keyword.shopId);
        params.append("productId", _this.keyword.productId);
        params.append("shippingStatus", 3);
        count(params).then((res) => {
          this.Tobeshippedhexiao = res.data;
        });
      },
      countslect() {
        var _this = this;
        if (utils.isNull(this.keyword.date)) {
          this.keyword.date = [];
        }
        let params = new URLSearchParams();
        params.append("pageNum", _this.pageNum);
        params.append("pageSize", _this.pageSize);
        params.append("shippingEmployeeId", _this.song);
        params.append("memberId", _this.keyword.memberId);
        params.append(
          "startDate",
          this.keyword.date.length > 0 ? this.keyword.date[0] : ""
        );
        params.append(
          "endDate",
          this.keyword.date.length > 0 ? this.keyword.date[1] : ""
        );
        params.append("keyword", _this.keyword.information);
        params.append("shopId", _this.keyword.shopId);
        params.append("productId", _this.keyword.productId);
        params.append("shippingStatus", 1);
        count(params).then((res) => {
          this.Tobeshipped = res.data;
        });
      },
      countclick() {
        var _this = this;
        if (utils.isNull(this.keyword.date)) {
          this.keyword.date = [];
        }
        let params = new URLSearchParams();
        params.append("pageNum", _this.pageNum);
        params.append("pageSize", _this.pageSize);
        params.append("shippingEmployeeId", _this.song);
        params.append("memberId", _this.keyword.memberId);
        params.append(
          "startDate",
          this.keyword.date.length > 0 ? this.keyword.date[0] : ""
        );
        params.append(
          "endDate",
          this.keyword.date.length > 0 ? this.keyword.date[1] : ""
        );
        params.append("keyword", _this.keyword.information);
        params.append("shopId", _this.keyword.shopId);
        params.append("productId", _this.keyword.productId);
        params.append("shippingStatus", 2);
        count(params).then((res) => {
          this.Tobedelivered = res.data;
        });
      },
      queryShopClick(data) {
        this.query.shopId = data.shopId;
      },
      writeoff() {
        var _this = this;

        if (this.deliveryForm == null) {
          return;
        }

        let params = new URLSearchParams();
        params.append("status", 3);
        params.append("employeeId", _this.shippingEmployeeId);
        params.append("dstartDate", _this.deliveryDate);
        params.append("dendDate", _this.deliveryDate);

        completeBatch(params).then((res) => {
          if (res.type == "success") {
            this.$message("核销成功");
          } else {
            this.$message.error("核销失败");
          }
        });

      },
      delivery(val) {
        if (utils.isNull(val)) {
          return "0.00";
        } else {
          return val.toFixed(2);
        }
      },
      totalOrder() {
        if (
          this.pagesnum == "待接单" ||
          this.pagesnum == "待付款" ||
          this.pagesnum == "已完成" ||
          this.pagesnum == "已关闭" ||
          this.pagesnum == "全部订单"
        ) {
          this.loadOrder();
        } else if (
          this.pagesnum == "待核销" ||
          this.pagesnum == "待派单" ||
          this.pagesnum == "配送中"
        ) {
          this.shippingloadOrder();
        } else if (this.pagesnum == "已退款") {
          this.loadTuiOrder();
        }
      },
      queryEmployee(query) {
        this.getEmployeeList(query);
      },
      getEmployeeList(query) {
        let param = new URLSearchParams();
        param.append("name", query);
        emoloyeeList(param).then((res) => {
          // console.log(res)
          console.log("送货员");
          this.emoloyee = res.data.data;
        });
      },
      shippingEmployeeIdChange(val) {
        this.shippingEmployeeId = val;
      },
      deliveryaa(val) {
        this.song = val;
      },
      obtainshippingList() {
        var _this = this;

        let params = new URLSearchParams();
        params.append("status", 3);
        params.append("employeeId", _this.song);
        params.append("memberId", _this.keyword.memberId);
        params.append(
          "startDate",
          this.keyword.date.length > 0 ? this.keyword.date[0] : ""
        );
        params.append(
          "endDate",
          this.keyword.date.length > 0 ? this.keyword.date[1] : ""
        );
        params.append("productId", _this.keyword.productId);

        _this.completeEmployeeId = _this.song;
        _this.completeMemberId = _this.keyword.memberId;
        _this.completeStartDate =
          this.keyword.date.length > 0 ? this.keyword.date[0] : "";
        _this.completeEndDate =
          this.keyword.date.length > 0 ? this.keyword.date[1] : "";
        _this.completeProductId = _this.keyword.productId;
      },
      shippingloadOrder() {
        var _this = this;
        if (utils.isNull(this.keyword.date)) {
          this.keyword.date = [];
        }
        _this.shippingForm = []
        _this.total = 0
        let params = new URLSearchParams();
        params.append("pageNum", _this.pageNum);
        params.append("pageSize", _this.pageSize);
        params.append("shippingEmployeeId", _this.song);
        params.append("memberId", _this.keyword.memberId);
        params.append(
          "startDate",
          this.keyword.date.length > 0 ? this.keyword.date[0] : ""
        );
        params.append(
          "endDate",
          this.keyword.date.length > 0 ? this.keyword.date[1] : ""
        );
        params.append("keyword", _this.keyword.information);
        params.append("shopId", _this.keyword.shopId);
        params.append("productId", _this.keyword.productId);
        params.append("shippingStatus", _this.shippingStatus);
        shipplist(params)
          .then((response) => {
            _this.shippingForm = response.data.data;
            _this.total = response.data.total;
          })
          .catch((error) => {
            // console.log('error!!')
          });
      },
      memberDouble(data) {
        this.memberName = data.name;
        this.query.memberId = data.id;
        this.memberTableVisible = false;
      },
      memberTableClose() {
        this.memberTableVisible = false;
      },
      batchConfirmClick() {
        let _this = this;

          _this.batchConfirmVisible = true;


      },
      batchConfirmQuery() {
        let _this = this;
        let params = new URLSearchParams();
        params.append("employeeId", _this.shippingEmployeeId);
        params.append("dstartDate", _this.deliveryDate);
        params.append("dendDate", _this.deliveryDate);
        params.append("status", 3);
        summary(params).then((res) => {
          _this.deliveryForm = res.data[0];
        });

      },
      batchConfirmClose() {
        this.batchConfirmVisible = false;
      },
      addProductClick(data) {
        if (data.length > 1) {
          this.productName = data[0].name;
          this.query.productId = data[0].id;
          this.orderVisible = false;
          this.$message({
            message: "只能查询一个商品",
            offset: 120,
            center: true,
          });
        } else {
          this.productName = data[0].name;
          this.query.productId = data[0].id;
        }
      },
      doubleClick(val) {
        this.productName = val.name;
        this.query.productId = val.id;
        this.orderVisible = false;
      },
      orderClose() {
        this.orderVisible = false;
      },
      toSearchMember() {
        this.memberTableVisible = true;
      },
      selectMember(data) {
        if (!utils.isNull(data)) {
          this.memberName = data.name;
          this.query.memberId = data.id;
        } else {
          this.query.memberId = "";
        }
      },
      toAddProduct() {
        this.orderVisible = true;
      },
      changeProduct(data) {
        if (!utils.isNull(data)) {
          this.productName = data.name;
          this.query.productId = data.id;
        } else {
          this.query.productId = "";
        }
      },
      beforeMount() {
        var _this = this;
        window.onresize = () => {
          return (() => {
            if (_this.queryType == false) {
              var h =
                document.documentElement.clientHeight ||
                document.body.clientHeight;
              _this.curHeight = h - 311; //减去页面上固定高度height
              _this.tabsHeight = h - 381;
            } else {
              var h =
                document.documentElement.clientHeight ||
                document.body.clientHeight;
              _this.curHeight = h - 224; //减去页面上固定高度height
              this.tabsHeight = h - 294;
            }
          })();
        };
      },
      comeIn() {
        // console.log('222')
        var h =
          document.documentElement.clientHeight ||
          document.body.clientHeight;
        this.curHeight = h - 224; //减去页面上固定高度height
        this.tabsHeight = h - 294;
      },
      loadOrder() {
        var _this = this;
        _this.orderForm = []
        _this.total = 0
        let params = new URLSearchParams();
        params.append("pageNum", _this.pageNum);
        params.append("pageSize", _this.pageSize);
        params.append("shippingStatus", _this.shippingStatus);
        params.append("orderStatus", _this.orderStatus);
        params.append(
          "startDate",
          this.keyword.date == null || this.keyword.date.length == 0
            ? ""
            : this.keyword.date[0]
        );
        params.append(
          "endDate",
          this.keyword.date == null || this.keyword.date.length == 0
            ? ""
            : this.keyword.date[1]
        );
        params.append("paymentStatus", _this.paymentStatus);
        params.append("keyword", _this.keyword.information);
        params.append("memberId", _this.keyword.memberId);
        params.append("shopId", _this.keyword.shopId);
        params.append("productId", _this.keyword.productId);
        list(params)
          .then((response) => {
            _this.orderForm = response.data.data;
            _this.total = response.data.total;
          })
          .catch((error) => {
          });
      },
      loadTuiOrder() {
        var _this = this;
        _this.orderForm = []
        _this.total = 0
        let params = new URLSearchParams();
        params.append("pageNum", this.pageNum);
        params.append("pageSize", this.pageSize);
        params.append("status", "");
        params.append(
          "startDate",
          this.keyword.date == null || this.keyword.date.length == 0
            ? ""
            : this.keyword.date[0]
        );
        params.append(
          "endDate",
          this.keyword.date == null || this.keyword.date.length == 0
            ? ""
            : this.keyword.date[1]
        );
        params.append("keyword", this.keyword.information);
        params.append("memberId", this.keyword.memberId);
        params.append("shopId", _this.keyword.shopId);
        // params.append('phone',this.keyword.phone)
        tuilist(params).then((response) => {
          this.orderForm = response.data.data;
          this.total = response.data.total;
        });
      },
      chooseClick() {
        this.queryType = !this.queryType;
        if (this.queryType == false) {
          var h =
            document.documentElement.clientHeight ||
            document.body.clientHeight;
          this.curHeight = h - 311; //减去页面上固定高度height
          this.tabsHeight = h - 381;
        } else {
          var h =
            document.documentElement.clientHeight ||
            document.body.clientHeight;
          this.curHeight = h - 224; //减去页面上固定高度height
          this.tabsHeight = h - 294;
        }
      },
      queryMember(query) {
        // 搜索客户
        this.memberIdOptions = [];
        memberList({keyword: query})
          .then((res) => {
            res.data.data.forEach((option, index) => {
              this.$set(this.memberIdOptions, index, option);
            });
          })
          .catch((err) => {
            console.log(err);
          });
      },
      getMemberList() {
        // 加载客户
        memberList()
          .then((res) => {
            res.data.data.forEach((option, index) => {
              this.$set(this.memberIdOptions, index, option);
            });
          })
          .catch((err) => {
            console.log(err);
          });
      },
      queryProduct(query) {
        // 查询商品
        this.productOptions = [];
        productList({keyword: query})
          .then((res) => {
            res.data.data.forEach((option, index) => {
              this.$set(this.productOptions, index, option);
            });
          })
          .catch((err) => {
            console.log(err);
          });
      },
      getProductList() {
        // 加载商品
        productList()
          .then((res) => {
            res.data.data.forEach((option, index) => {
              this.$set(this.productOptions, index, option);
            });
          })
          .catch((err) => {
            console.log(err);
          });
      },
      queryClick() {
        this.lastTime = this.curTime;
        this.keyword = this.query;
        if (
          this.pagesnum == "待付款" ||
          this.pagesnum == "已关闭" ||
          this.pagesnum == "已关闭" ||
          this.pagesnum == "全部订单"
        ) {
          this.loadOrder();
        } else if (this.pagesnum == "待接单") {
          this.loadOrder();
        } else if (this.pagesnum == "配送中") {
          this.shippingloadOrder();
        } else if (this.pagesnum == "待派单") {
          this.shippingloadOrder();
        } else if (this.pagesnum == "待核销") {
          this.shippingloadOrder();
          this.obtainshippingList();
        } else if (this.pagesnum == "已退款") {
          this.loadTuiOrder();
        }
      },
      resetClick() {
        this.query.date = [];
        this.query.information = "";
        this.productName = "";
        this.memberName = "";
        this.query.memberId = "";
        this.query.phone = "";
        this.query.productId = "";
        this.keyword = this.query;
        this.pageNum = 1;
        this.loadOrder();
      },
      detailsClick(data) {
        this.$router.push({
          path: "/order/view",
          query: {id: data},
        });
      },
      detailsClickone(data) {
        this.$router.push({
          path: "/shipping/view",
          query: {id: data},
        });
      },
      detailsClicktwo(data) {
        this.$router.push({
          path: "/askfor/view",
          query: {id: data},
        });
      },
      addClick() {
        this.$router.push({
          path: "/order/add?type=add",
        });
      },
      tabsClick(data) {
        var _this = this;
        this.pagesnum = data.name;
        if (
          data.name == "待派单" ||
          data.name == "配送中" ||
          data.name == "待核销"
        ) {
          this.selectsong = true;
        } else {
          this.selectsong = false;
        }
        if (data.name == "待核销") {
          _this.obtainshippingList();
          _this.obtain = true;
        } else {
          _this.obtain = false;
        }
        if (data.name == "待接单") {
          _this.paymentStatus = ""; // 付款状态
          _this.shippingStatus = 0; // 配送状态
          _this.orderStatus = 1; // 订单状态
          _this.loadOrder();
        } else if (data.name == "待派单") {
          _this.shippingStatus = 1;
          _this.shippingloadOrder();
        } else if (data.name == "配送中") {
          _this.shippingStatus = 2;
          _this.shippingloadOrder();
        } else if (data.name == "待核销") {
          _this.shippingStatus = 3; // 配送状态
          _this.shippingloadOrder();
        } else if (data.name == "已完成") {
          _this.paymentStatus = ""; // 付款状态
          _this.shippingStatus = ""; // 配送状态
          _this.orderStatus = 2; // 订单状态
          _this.loadOrder();
        } else if (data.name == "已退款") {
          _this.orderStatus = 1;
          _this.loadTuiOrder();
        } else if (data.name == "已关闭") {
          _this.paymentStatus = ""; // 付款状态
          _this.shippingStatus = ""; // 配送状态
          _this.orderStatus = 3; // 订单状态
          _this.loadOrder();
        } else if (data.name == "待付款") {
          _this.orderStatus = 0; // 订单状态
          _this.loadOrder();
        } else if (data.name == "全部订单") {
          _this.paymentStatus = ""; // 付款状态
          _this.shippingStatus = ""; // 配送状态
          _this.orderStatus = ""; // 订单状态
          _this.loadOrder();
        }
      },
      // 地图送货
      amapClick() {
        // this.amapType = true
        this.$router.push("/order/components/amap");
      },
    },
  };
</script>

<style scoped>
  .app {
    height: 80px;
    width: 100%;
    display: flex;
    background-color: rgb(233, 235, 236);
  }

  .deliveryboy {
    height: 100%;
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: rgb(245, 247, 250) 1px solid;
  }

  .content {
    height: 100%;
    width: 700px;
    display: flex;
    justify-content: space-around;
  }

  .content_one {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .summary {
    height: 100%;
    padding-top: 40px;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .details_card {
    overflow: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
  }

  .elOption {
    background-color: #909399;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px;
  }

  .details_card:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }

  .el-input__inner {
    width: 100% !important;
  }

  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/
  .el-header {
    padding: 10px;
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    flex-direction: column;
  }

  .report_header_left {
    width: 5px;
    height: 46px;
    background-color: #409eff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 150px;
    margin-top: 5px;
  }

  .report_header_date {
    margin-left: 10px;
    width: 250px;
    margin-top: 5px;
  }

  .span-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .btn-bell-badge {
    width: 26px;
    height: 18px;
    margin-left: 5px;
    line-height: 18px;
    border-radius: 15px;
    background: #ed4014;
  }

  .num {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #fff;
  }

  .el-tabs__header {
    position: relative;
  }

  .el-tabs__nav-scroll {
    position: relative;
  }

  .el-checkbox-refresh {
    position: absolute;
    right: 26px;
    top: 20px;
    z-index: 1;
  }
</style>





